<template>
  <div class="card">
    <div class="profile">
      <img class="avatar" :src="infoData.headUrl" alt="Profile Picture" />
      <div class="name">{{ infoData.nickname }}</div>
      <div class="role">专业玩家</div>
      <!-- <button class="follow-btn">关注</button> -->
    </div>
    <div class="description">
      {{ infoData.personalDesc }}
    </div>
    <div class="stats">
      <div class="stat-item">
        <div class="stat-value">{{ (parseFloat(infoData.weekWin) * 100).toFixed(1) }}%</div>
        <div class="stat-label">七天命中</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ (parseFloat(infoData.weekResponseRate) * 100).toFixed(1) }}%</div>
        <div class="stat-label">七天回报</div>
      </div>
      <div class="stat-item" v-show="infoData.continuousRed > 0">
        <div class="stat-value">{{ infoData.continuousRed }}</div>
        <div class="stat-label">当前连红</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toFixed } from 'ant-design-vue/es/input-number/src/utils/MiniDecimal';
import { defineProps, watch, ref } from 'vue'
const infoData = ref({})
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})
watch(
  () => props.info,
  (newVal, oldVal) => {
    infoData.value = newVal
  }
)
</script>

<style scoped lang="scss">
.card {
  width: 330px; /* 根据需要调整 */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.profile {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.name {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 800;
  font-size: 16px;
}

.role {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #16b13a;
  background: #e5f6e7;
  border-radius: 20px 20px 20px 20px;
  margin-bottom: 10px;
  width: 65px;
  margin: 14px auto;
}

.follow-btn {
  background: #16b13a;
  color: white;
  border: none;
  border-radius: 20px;
  //   padding: 10px 20px;
  font-size: 12px;
  width: 76px;
  height: 30px;
  cursor: pointer;
  margin-bottom: 35px;
}

.description {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #afb8cb;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}

.stats {
  display: flex;
  //   justify-content: space-around;
  flex-wrap: wrap;
  background-color: #f7faff;
  border-radius: 10px;
  padding: 10px 0;
  width: 288px;
  height: 200px;
  margin-top: 20px;
  box-sizing: border-box;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  //   flex: 1;
  width: 144px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #444444;
}

.stat-label {
  font-size: 12px;
  color: #999999;
}
</style>
